<template>
  <div>
    <router-view></router-view>
    <van-tabbar v-if="showBottomTabbar()" @change="changeTabbar" v-model="active">
      <van-tabbar-item replace to="/home" name="/home" icon="wap-home">首页</van-tabbar-item>
      <van-tabbar-item replace to="/my" name="/my" icon="manager">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { Tabbar, TabbarItem } from "vant";
export default {
  components: {
    Tabbar,
    TabbarItem,
  },
  data(){
    return {
      active:'',
    }
  },
  watch:{
    $route(){
      this.active = this.$route.path
    }
  },
  methods:{
    showBottomTabbar(){
      let list = ['/home','/my']
      return list.indexOf(this.$route.path) !=-1
    },
    changeTabbar(tab){
      console.log(tab,this.$route.path)
    }
  }
};
</script>

<style>
#app {
  font-size: 16px;
}
a {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
a:link, a:visited {
  color: unset;
}
</style>
